<template>
  <div class="category-page">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/">首页</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item v-if="category">
        {{ category.title }}
      </a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 分类标题 -->
    <h1 class="category-title" v-if="category">{{ category.title }}</h1>

    <!-- 子分类卡片导航 -->
    <div class="submenu-grid" v-if="submenus && submenus.length">
      <a-row :gutter="[24, 24]">
        <a-col 
          v-for="submenu in submenus" 
          :key="submenu.slug"
          :xs="24"
          :sm="12"
          :md="submenus.length <= 3 ? 8 : 6"
          :lg="submenus.length <= 4 ? 6 : 4"
          :xl="submenus.length <= 6 ? 4 : 3"
        >
          <a-card 
            hoverable 
            class="submenu-card"
            @click="handleCardClick(submenu)"
          >
            <template #cover>
              <div class="card-icon">
                <folder-outlined />
              </div>
            </template>
            <a-card-meta :title="submenu.title">
              <template #description>
                <div class="card-description">
                  <span class="doc-count" v-if="submenu.doc_count">{{ submenu.doc_count }} 篇文档</span>
                  <span class="child-count" v-if="submenu.child_count">{{ submenu.child_count }} 个子目录</span>
                </div>
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { FolderOutlined } from '@ant-design/icons-vue'
import { categoryApi } from '@/utils/api'

const route = useRoute()
const router = useRouter()
const category = ref(null)
const submenus = ref([])

// 获取分类详情和子菜单
const fetchData = async () => {
  try {
    // 获取分类详情
    const { code, data } = await categoryApi.getDetail(route.params.slug)
    if (code === 0 && data) {
      category.value = data
    }

    // 获取子菜单
    const childrenRes = await categoryApi.getChildren(route.params.slug)
    if (childrenRes.code === 0 && childrenRes.data) {
      submenus.value = childrenRes.data
    }
  } catch (error) {
    console.error('获取分类数据失败:', error)
  }
}

// 处理卡片点击
const handleCardClick = (submenu) => {
  if (submenu.child_count > 0) {
    // 如果有子菜单，跳转到分类页
    router.push({
      path: `/category/${submenu.slug}`,
      state: { categoryInfo: submenu }
    })
  } else {
    // 如果没有子菜单，跳转到文档页
    router.push({
      name: 'Document',
      query: { category: submenu.slug },
      state: { 
        categoryInfo: submenu,
        parentCategory: category.value
      }
    })
  }
}

// 监听路由变化
watch(
  () => route.params.slug,
  () => {
    fetchData()
  }
)

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.category-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  min-height: calc(100vh - 64px);
  background: #fff;
}

.breadcrumb {
  margin-bottom: 16px;
  color: #8c8c8c;
}

.category-title {
  font-size: 24px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.submenu-grid {
  margin: 0;
}

.submenu-card {
  height: 100%;
  transition: all 0.2s ease;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #f0f0f0;
  background: #fff;
}

.submenu-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.08), 
              0 9px 28px 0 rgba(0,0,0,0.05), 
              0 12px 48px 16px rgba(0,0,0,0.03);
}

.card-icon {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  transition: all 0.3s ease;
  border-radius: 4px 4px 0 0;
}

.submenu-card:hover .card-icon {
  background: #e6f7ff;
}

.card-icon .anticon {
  font-size: 36px;
  color: #595959;
  transition: all 0.3s ease;
}

.submenu-card:hover .card-icon .anticon {
  color: #1890ff;
}

:deep(.ant-card-meta-title) {
  font-size: 15px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 8px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-description {
  display: flex;
  gap: 12px;
  color: #8c8c8c;
  font-size: 13px;
}

.card-description .doc-count,
.card-description .child-count {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .category-page {
    padding: 12px 16px;
  }
  
  .category-title {
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 12px;
  }
  
  .card-icon {
    height: 100px;
  }
}

@media (max-width: 576px) {
  .card-icon {
    height: 120px;
  }
}
</style> 